<template>
	<div class="hanbao">
		<div class="hbtu">
			<img class="datu" src="//fuss10.elemecdn.com/0/35/e74a85992c43f42ff55c84a3d8d6apng.png?imageMogr/format/webp/thumbnail/!375x375r/gravity/Center/crop/375x375/">
			<div class="cuohao" @click="toHeader">×</div>
		</div>
		<div class="xinpins">新品</div>
		<p class="scs">双层香辣鸡排堡</p>
		<div class="haopings">月售1075份 好评率98%</div>
			<p class="jiaqian">￥16.9</p>
			<div class="tianjia">
						+
					</div>
		<p class="yuanliao">烤面包的香气和炸鸡的香气混合，口感酥脆可口，就爱这口热辣味！主要原料:鸡肉, 生菜, 面粉。
			</p>
			<div class="footer">
		<div class="youhui">
			<p class="manjian">满30减20元，满40减24元，满60减35元</p>
		</div>
		<div class="goucar">
			<div class="goutu iconfont">&#xe601;</div>
			<div class="peisong">
				<p class="weixuan">未选购商品<br>另需配送费</p>
			</div>
			<div class="jqqi">￥20起送</div>
		</div>
	</div>
	</div>
</template>


<script type="text/javascript">
	export default{
			methods:{
				toHeader(){
					this.$router.push("/");
				}
			}
	}
</script>


<style type="text/css">
	.hbtu{
		position: relative;
	}
	.datu{
		width:100%;
	}
	.cuohao{
		width:25px;
		height:25px;
		border-radius: 50%;
		background-color: #999;
		text-align: center;
		position: absolute;
		top:0;
		right:0;
	}
	.xinpins{
		height:17px;
		width:30px;
		font-size: .533333rem;
		color:#fff;
		display: inline-block;
		text-align: center;
		background-color: #00c180;
		float:left;
	}
	.scs{
		font-size: 16px;
		font-weight:700;
		float:left;
		margin:0;
		margin-left: 10px;
		width:87%;
	}
	.haopings{
		font-size: .266667rem;
    	color: #999;
    	margin:0;
		margin-bottom: 3px;
		margin-top:30px;
	}
	.jiaqian{
		color: rgb(255, 83, 57);
		display: inline-block;
	}
	.tianjia{
		background-color: #2396ff;
		border-radius: 50%;
		width:25px;
		height:25px;
		text-align: center;
		color:#fff;
		display: inline-block;
		float:right;
		margin-top: 15px;
	}
	.yuanliao{
		font-size: .293333rem;
    	color: #666;
    	margin:0;
	}
	.footer{
		margin-top:30px;
		position: fixed;
		width:100%;
		bottom:0;
		right:0;
	}
	.youhui{
		background-color: #f9e8a3;
		width:100%;
		margin:0;
	}
	.manjian{
		text-align:center;
		color:#333;
		margin:0;
	}
	.goucar{
		background-color: #363636;
		position: relative;
		height:3.28rem;
		text-align:center;
	}
	.goutu{
		font-size:40px;
		width:50px;
		height:50px;
		border-radius: 50%;
		background-color: rgba(61,61,63,.9);
		position: absolute;
		top:-10px;
		left:10px;
	}
	.weixuan{
		font-size: .48rem;
		color:#fff;
		/*display: inline-block;*/	
		float:left;
		margin-left:80px;
	}
	.jqqi{
		font-size: .4rem;
		color:#fff;
		text-align: center;
		float:right;
		margin-top: 20px;
    	margin-right: 10px;
	}
</style>